<template>
  <div class="page-info">
    <i
      class="iconfont reco-account"
      v-if="pageInfo.frontmatter.author || $themeConfig.author || $site.title">
      <span>{{ pageInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
    </i>
    <i
      v-if="pageInfo.frontmatter.date"
      class="iconfont reco-date">
      <span>{{ pageInfo.frontmatter.date | formatDateValue }}</span>
    </i>
    <i
      v-if="showAccessNumber === true"
      class="iconfont reco-eye">
      <AccessNumber
        :idVal="pageInfo.path"
        :numStyle="numStyle"/>
    </i>
    <i
      v-if="pageInfo.frontmatter.tags"
      class="iconfont reco-tag tags">
      <span
        v-for="(subItem, subIndex) in pageInfo.frontmatter.tags"
        :key="subIndex"
        class="tag-item"
        :class="{ 'active': currentTag == subItem }"
        @click.stop="goTags(subItem)">{{subItem}}</span>
    </i>
  </div>
</template>

<script>
  // 引入时间格式化js文件
  import {formatDate} from '@theme/helpers/utils'

  export default {
    props: {
      pageInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      currentTag: {
        type: String,
        default: ''
      },
      showAccessNumber: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        numStyle: {
          fontSize: '.9rem',
          fontWeight: 'normal',
          color: '#999'
        }
      }
    },
    filters: {
      formatDateValue(value) {
        if (!value) return ''
        // 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
        // 对value进行处理
        value = value.replace('T', ' ').slice(0, value.lastIndexOf('.'))
        // 转化后的value 2019-09-20 18:22:30
        // 获取到时分秒
        const h = Number(value.substr(11, 2))
        const m = Number(value.substr(14, 2))
        const s = Number(value.substr(17, 2))
        // 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
        if (h > 0 || m > 0 || s > 0) {
          // 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
          return formatDate(value)
        } else {
          // 用户没有输入或者输入了 00:00:00
          return formatDate(value, 'yyyy-MM-dd')
        }
      }
    },
    methods: {
      goTags(tag) {
        if (this.$route.path !== `/tag/${tag}/`) {
          this.$router.push({path: `/tag/${tag}/`})
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .page-info
    margin 0 2rem
    display inline-flex
    flex-wrap wrap
  .iconfont
    display inline-block
    line-height 1.5rem

    &:not(:last-child)
      margin-right 1rem

    span
      margin-left 0.5rem

  .tags
    .tag-item
      font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
      cursor pointer

      &.active
        color $accentColor

      &:hover
        color $accentColor

  @media (max-width: $MQMobile)
    .tags
      display block
      margin-left 0 !important
    .page-info
      margin 0
      justify-content center
</style>
